<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="likeArray"></div>
    <script>

        // forEach
        let arr1 = ['a', 'b'];
        // 参数为一个函数，有三个接受参数（可不传），没有break;如果跳过可以return，类似continue
        // item为当前项，index为当前下标，arr为数组本身
        // 如：第一次循环时 item = a, index = 0, arr = arr1
        arr1.forEach((item, index, arr) => {
            console.log(item, index, arr);
        });

        // filter返回新数组,return true就返回item，return false就不返回（不会返回undefined）
        let arr2 = ['1.00', '2.99', '3.88'];
        let price = arr2.filter((item, index, arr) => {
            return item == '1.00';
        })
        console.log(price);

        //map返回新数组，在函数值return什么就是什么，不写return就默认为undefined
        let arr3 = ['1.00', '2.99', '3.88'];
        let price3 = arr3.map((item, index, arr) => {
            if (item == '1.00') return '￥' + item;
        })
        console.log(price3)

        //some返回boolean，遇到return true马上返回，并停止
        let arr4 = [1, 2, 3, 4];
        let boolean = arr4.some((item, index, arr) => {
            if (item < 4) return true;
        })
        console.log(boolean)

        //reduce 
        //当reduce传一个参数时， 第一次循环prev为数组的第一项，current为第二项，index为1，return的值转为下一个prev，当没有return时，下一个prev为undefined
        //当reduce传两个参数时， 第一次循环的prev为第二个参数，current为第一项，index为1，return的值转为下一个prev，当没有return时，下一个prev为undefined
        let arr5 = [1, 2, 3, 4];
        let return5 = arr5.reduce((prev, current, index, arr) => {
            console.log(prev, current, index, arr)
            return prev;
        })
        let return6 = arr5.reduce((prev, current, index, arr) => {
            console.log(prev, current, index, arr)
            prev.push(current)
            return prev;
        }, []);
        console.log(return6)

        //利用reduce给数组对象去重
        let arr6 = [
            { id: 1, name: 'li' },
            { id: 2, name: 'chen' },
            { id: 1, name: 'li' },
        ];
        let toSimple = (arr, prop) => {
            let temp = [];
            let simpleArr = arr.reduce((prev, curr) => {
                (!temp.includes(curr[prop])) && (temp.push(curr[prop]), prev.push(curr));
                return prev;
            }, []);
            return simpleArr;
        }
        let simpleArr = toSimple(arr6, 'id');
        console.log(simpleArr);




        //类数组定义，有length属性的Object,常见的nodeList, argument等
        //类数组转换为数组
        //原理用call改变[].slice的this为likeArray去执行，slice的返回值为一个新数组
        let LikeArrayToArray = (likeArray) => {
            if (likeArray.length) {
                return Array.prototype.slice.call(likeArray);
            } else {
                return likeArray;
            }
        }

        //类数组直接使用数组方法
        //原理用call改变[].forEach的this为likeArray去执行, 第二个参数为一个匿名函数作为forEach的传入参数
        var likeArray = document.getElementsByClassName('likeArray');
        [].forEach.call(likeArray, (item, index, arr) => { console.log(item, index, arr) });
        //其他的数组方法如filler，map，some等同样可以使用


    </script>
</body>

</html>